<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" color="#fff" size="20px" @click="$p.back()" name="arrow-left"></u-icon>
					<text style="color:#fff;" >我的奖励</text>
					<text class="r_title" @click="$p.navto('/pages/my/myrewardlog')">余额明细</text>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<view class="top">
				<view class="left">
					<p>我的奖励</p>
					<h3>{{userinfo.user_money}}</h3>
				</view>
				<view class="button" @click="$p.navto('/pages/my/paymentMethod')">收款账号</view>
			</view>

			<view class="box">
				<view class="money">
					<p>提现金额</p>
					<view class="piece">
						<text>¥</text>
						<input type="number" @input="inputchange()" v-model="money" :maxlength="8" placeholder="请输入金额" placeholder-class="plh">
					</view>
				</view>

				<view class="widthdraw">
					<text>提现方式</text>
					<view>
						<image src="http://img.cpgm.cc/panda/static/public/ali.png" mode="widthFix" />
						<text>支付宝</text>
					</view>
				</view>

				<view class="explain">
					<p>1、每个支付宝只能绑定一个平台账号，提现无手续费。</p>
					<p>2、每日可提现一次，每次最低20元。</p>
					<p>3、提现时间为9:00-17:00.节假日不休息,18:00左右自动结算</p>
					<p>4、如未到账或收款方式填写错误请及时联系官方客服。</p>
				</view>

				<view class="button btn" @click="cash()">立即提现</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: "transparent",
				},
				money:'',
				alicount:'',
				userinfo: uni.getStorageSync('userinfo'),
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
					this.alicount = res.data.alipay_account;
				})
			},

			inputchange(){
				if(this.money > Number(this.userinfo.user_money)) {
					this.$nextTick(()=>{
						this.money = Number(this.userinfo.user_money)
					})
				}
			},

			all(){
				this.money = this.userinfo.user_money
			},
			// 提现接口
			async cash() {
				if (this.alicount == '' || this.alicount == null) {
					this.$u.toast('提现请先绑定收款方式')
				} else {
					let res = await this.$http.index.cash({
						money: this.money
					})
					this.$u.toast(res.msg);
					if (res.code == 1) {
						this.getUserInfo();
						this.withshow = false
					}
				}
			},
		}
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	min-height: 100vh;
}

.r_title {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff !important;
	font-size: 12px !important;
}

.main {
	padding: 10px;
}

.top {
	background: linear-gradient(90deg, #4F4E4C 0%, #242424 100%);
	box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2), inset -4px 0px 5px 0px rgba(53,53,53,1), inset 0px -4px 5px 0px rgba(77,77,77,1);
	border-radius: 13px;
	padding: 15px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	.button {
		width: 82px;
		height: 33px;
		background:  linear-gradient(225deg, #FFFC94 0%, #FFD400 50%, #FFFD25 100%);
		box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
		border-radius: 5px;
		border: 1px solid #000000;
		color: #B73800;
		font-size: 13px;
		font-weight: 600;
	}

		.left {
		display: flex;
		flex-direction: column;

		p {
			color: #FFFFFF;
			font-size: 13px;
			
		}
		h3 {
			color: #FFFFFF;
			font-size: 30px;
			margin-top: 4px;
		}
	}
}

.box {
	background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
	border-radius: 9px;
	padding: 15px;
	margin-top: 15px;
}

.money {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 7px;
	padding: 15px;
}

.piece {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	input {
		flex: 1;
		margin: 0 15px;
		font-size: 18px;
		font-weight: 600;
	}

	text:nth-child(1) {
		color: #131314;
		font-size: 25px;
		font-weight: 600;
	}
	text:nth-child(3) {
		color: #000000;
		font-size: 13px;
	}
}

.plh {
	font-weight: normal;
	font-size: 14px;
}



.widthdraw {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 7px;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;

	text:nth-child(1) {
		color: #343434;
		font-size: 14px;
		font-weight: 600;
	}

	view {
		display: flex;
		align-items: center;

		image {
			width: 25px;
			margin-right: 5px;
		}
		text {
			color: #1D1E24;
			font-size: 14px;
			font-weight: 600;
		}
	}
}

.explain {
	font-size: 12px;
	color: #333333;
}

.btn {
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	color: #B73800;
	font-size: 20px;
	font-weight: 600;
	height: 65px;
	margin-top: 10vh;
}








</style>
